<script setup lang="ts">
import { ref, reactive } from "vue";

interface cardType {
  alg: string;
  canDislike: boolean;
  id: number;
  name: string;
  picUrl: string;
  song: any;
  type: number;
}

const router = useRouter();

defineProps({
  // 卡片标题
  title: {
    type: String,
  },
  // 卡片内容
  cardList: {
    type: Array<cardType>,
    required: true,
  },
});

const activeCard = (item: any) => {
  router.push(`/song/${item.id}`);
};
</script>

<template>
  <el-skeleton animated :count="15" :loading="cardList.length <= 0">
    <template #template>
      <div class="item">
        <el-skeleton-item class="ske-img" variant="image" />
        <div class="ske-info">
          <el-skeleton-item variant="h3" class="ske-name" />
          <el-skeleton-item variant="h3" class="ske-name" style="width: 50%" />
        </div>
      </div>
    </template>
    <template #default>
      <div class="card" v-if="cardList.length > 0">
        <div class="title">
          <h3>{{ title }}</h3>
          <h6>更多 ></h6>
        </div>
        <el-card
          v-for="item in cardList"
          :key="item.id"
          :body-style="{
            borderRadius: 'var(--el-border-radius-round)',
            padding: '10px',
          }"
          @click="activeCard(item)"
          shadow="never"
        >
          <el-image :src="item.picUrl" fit="cover" loading="lazy" lazy>
          </el-image>
          <div class="music-title">
            <span>{{ item.name }}</span>
            <div class="music-desc">
              <span class="desc" v-for="song in item.song.album.artists">
                {{ song.name }}
              </span>
            </div>
          </div>
        </el-card>
      </div>
    </template>
  </el-skeleton>
</template>

<style scoped lang="scss">
.title {
  width: 100%;
  display: flex;
  justify-content: space-between;

  h3,
  h6 {
    margin-bottom: 5px;
  }
  h6:hover {
    color: var(--el-color-primary);
    cursor: pointer;
  }
}
.card {
  margin-top: 15px;
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  .el-card {
    // flex-shrink: 0;
    // flex-grow: 1;
    flex: 1 0 18%;
    border-radius: var(--el-border-radius-round);
    margin: 5px 5px;
    flex-shrink: 1;
    cursor: pointer;
    &:hover {
      box-shadow: 0 5px 1em 0px var(--el-color-info-light-3);
      transform: translateY(-3px);
    }
  }
  .el-image {
    border-radius: var(--el-border-radius-round);
  }
  .music-title {
    font-size: var(--el-font-size-base);
    width: 130px;
    position: relative;

    .music-desc {
      font-size: var(--el-font-size-small);
      color: #909399;
      width: 120px;

      .desc:not(:nth-last-of-type(-n + 1))::after {
        content: ' / ';
      }
    }
    &,
    .music-desc {
      overflow: hidden; //隐藏文字
      text-overflow: ellipsis; //显示 ...
      white-space: nowrap; //不换行
    }
  }
}

@media (max-width: 1024px) {
  .el-card:nth-last-of-type(-n + 2) {
    display: none;
  }
}
// 歌单封面图的宽度
.el-skeleton {
  display: flex;
  flex-flow: row wrap;
  font-size: 0;
  .item {
    flex: 1 0 18%;
    flex-shrink: 1;
    margin: 5px 5px;
  }
  .ske-img {
    border-radius: var(--el-border-radius-round);
    height: 100px;
    width: 100%;
  }

  .ske-info {
    padding-top: 10px;
  }

  .ske-tags {
    display: flex;
    padding: 5px 0;

    * {
      width: 10%;
      margin-right: 10px;
    }
  }
}
</style>
